<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>航空售票网站</title>
    <link rel="stylesheet" href="css/demo.css">
</head>

<body>
<!--头部-->
<header class="head">
    <div class="out">
        <div class="logo"></div>
        <img src="./imgs/code.jpg" alt="">
    </div>
</header>
<!--导航栏-->
<div class="box">
    <div class="con">
        <div class="left">
            <a href="" class="active">首页</a>
            <a href="">国内机票</a>
            <a href="">国际机票</a>
            <a href="">民航咨询</a>
            <a href="">民航服务</a>


        </div>
        <div class="right">
            <a href="" class="login">登陆</a>
            <a href="">注册</a>
            <a href="" >用户中心</a>
            <div class="san"></div>
        </div>
    </div>
</div>
<!--热门城市-->
<div class="remen">
    <span>热门城市:</span>
    <a href="">深圳</a>
    <a href="">北京</a>
    <a href="">上海</a>
    <a href="">广州</a>
    <a href="">南京</a>
    <a href="">天津</a>
    <a href="">武汉</a>
    <a href="">长沙</a>
    <a href="">昆明</a>
    <a href="">贵阳</a>
    <a href="">成都</a>
    <a href="">重庆</a>
    <a href="">海口</a>
    <a href="">哈尔滨</a>
    <a href="">更多</a>
</div>
<!--轮播图-->
<div class="dinner">

    <div class=" din dinner1 " ></div>
    <div class=" din dinner2 "></div>
    <div class="btns">
        <div class=" btn btn1 active" ></div>
        <div class="btn btn2 "></div>
    </div>

</div>
<!--热门航线-->
<div class="hangxian">
    <div class="out">
        <div class="daohang">
            <span>热门航线预定</span>
            <div class="right">
                <a href="" class="active">全国</a>
                <a href="">深圳</a>
                <a href="">北京</a>
                <a href="">上海</a>
                <a href="">广州</a>
                <a href="">武汉</a>
                <a href="">成都</a>
                <a href="">海口</a>
                <a href="">重庆</a>
                <a href="">沈阳</a>
            </div>

        </div>
        <div class="feiji">
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>
            <div class="kuai">
                <div class="b">
                    <div class="top">
                        <span class="start">海口</span>
                        <span class="guo"></span>
                        <span class="end">郑州</span>
                    </div>
                    <div class="mid">5月15日</div>
                    <div class="down">
                        <span class="ji"></span>
                        <span class="type1">票价:</span>
                        <span class="type2">￥</span>
                        <span class="type3">150</span>
                    </div>
                </div>
            </div>

            </div>
        </div>
    </div>

</div>


</body>
<script>
    var banner = document.querySelectorAll(".din");
    var btns = document.querySelectorAll(".btn");
    var num=0;
    setInterval(function () {
        if (num == 2) {
            num = 0;
        }else{
            for (var i = 0; i < banner.length; i++) {
                banner[i].style.display = "none"
                btns[i].style.background="#000"
            }
            banner[num].style.display = "block";
            btns[num].style.background="orange"
            num++
        }
    },3000)

</script>
</html>
